<!-- 消息组件 -->
<template>
	<view class="item flex">
		<view class="imgs">
			<image :src="item.avatar" mode=""></image>
		</view>
		<view class="conte flex justify-between flex-column">
			<view class="top flex justify-between">
				<view class="left flex">
					<view class="name">
						{{item.actualName}}
					</view>
					<view class="copm text-ellipsis1 ">
						{{item.companyName}} {{item.position}}
					</view>
				</view>
				<view class="right flex justify-end align-end">
					{{getTimer()}}
				</view>
			</view>
			<view class="bom flex">
				<view class="status" v-if="!item.chatReadStatus">
					[未读]
				</view>
				<view class="status" v-if="item.chatReadStatus">
					[已读]
				</view>
				<view class="msg text-ellipsis1" v-if="item.chatStatus != 2">
					{{item.chatContent}} 
				</view>
				<view class="msg text-ellipsis1" v-if="item.chatStatus == 2">
					[图片] 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "messageItem",
		props:{
			item: Object
		},
		data() {
			return {
				time:''
			};
		},
		watch: {
			item(){
				this.getTimer()
			}
		},
		methods:{
			getTimer() {
			  let timer = this.item.createDate
			  let nowe = new Date();  // 当前的系统时间
			  let oldtime = new Date(timer);   //目标时间
			  let t_day = oldtime.getDate();
			  let t_year = oldtime.getFullYear();
			  let t_month = oldtime.getMonth() + 1;
			  let t_hour = oldtime.getHours();
			  let t_minute = oldtime.getMinutes();
			  if (t_hour<10){
			    t_hour = '0' + t_hour
			  }
			  if (t_minute < 10) {
			    t_minute = '0' + t_minute
			  }
			  let n_year = nowe.getFullYear();
			  let n_month = nowe.getMonth() + 1;
			  let n_day = nowe.getDate();
			  let mistiming = nowe - oldtime; // 计算出当前时间，与目标时间的时间差
			  
			  if (t_year == n_year) {
			    if (n_month == t_month) {
			      //  在同一月  
			      if (n_day - t_day == 1) {
			        // 差等于1 昨天 + 时分
					console.log('昨天' + ' ' + t_hour + ':' + t_minute)
			        return '昨天' + ' ' + t_hour + ':' + t_minute
			      } else if (n_day - t_day == 0) {
			        // 显示 时分
					console.log( t_hour + ':' + t_minute)
			        return t_hour + ':' + t_minute
			      } else {
					console.log(t_month + '.' + t_day)
			        return t_month + '.' + t_day
			      }
			    }else {
					console.log(t_month + '.' + t_day)
					return t_month + '.' + t_day
				}
			  } else {
			    //跨年了  显示 年 月 日 
				console.log(t_year + '.' + t_month + '.' + t_day)
			    return t_year + '.' + t_month + '.' + t_day
			  }
			  console.log(this.item)
			}
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
		//margin-left: 30rpx;
		.imgs {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 30rpx;
		}

		.conte {
			padding: 13rpx 0 8rpx;
			width: 560rpx;

			.top {
				.left {
					.name {
						font-weight: bold;
						color: #333333;
						font-size: 32rpx;
						margin-right: 15rpx;
						line-height: 1;
					}

					.copm {
						font-weight: 400;
						color: #999999;
						font-size: 22rpx;
						line-height: 1;
						width: 240rpx;
						white-space: nowrap;
					}
				}

				.right {
					font-weight: 400;
					color: #999999;
					font-size: 22rpx;
					line-height: 1;
				}
			}

			.bom {
				.status {
					font-size: 28rpx;
					color: #999999;
					margin-right: 15rpx;
					line-height: 1;
					//font-family: 'simsun';
				}

				.msg {
					width: 470rpx;
					font-size: 28rpx;
					color: #666666;
					line-height: 1;
				}
			}
		}
	}
</style>
